<template>
    <el-main>
        <el-card>
            <!-- 查询条件 -->
            <el-form :model="searchModel" ref="searchForm" label-width="80px" :inline="true" size="small">
                <el-form-item label="标题：">
                    <el-input v-model="searchModel.title" placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="search(pageNo, pageSize)">查询</el-button>
                    <el-button icon="el-icon-refresh-right" @click="resetValue()">重置</el-button>
                    <el-button type="success" icon="el-icon-plus" @click="openAddWindow()"
                    v-if="hasPermission('sys:material:add')">新增</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <p></p>
        <el-card>
            <el-table :data="documrntList" stripe style="width: 100%">
                <el-table-column type="index" width="50"></el-table-column>
                <template v-for="item in tableProp">
                    <el-table-column :prop="item.prop" :label="item.label" :formatter="item.formatter" :width="item.width">

                    </el-table-column>

                </template>
                <el-table-column align="center" label="查看" width="100px">
                    <template slot-scope="scope">
                        <a :href="scope.row.fileUrl">点击下载</a>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="200px" v-if="hasPermission('sys:material:edit')">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-edit" type="primary" size="mini"
                            @click="updateDocument(scope.row)"
                            v-if="hasPermission('sys:material:edit')">编辑</el-button>
                        <el-button icon="el-icon-delete" type="danger" size="mini"
                            @click="deleteDocument(scope.row)"
                            v-if="hasPermission('sys:material:delete')">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页工具栏 -->
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageNo" :page-sizes="[10, 20, 30, 40, 50]" :page-size="10"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
            <!-- 添加或修改窗口 -->
            <system-dialog :title="documentDialog.title"
             :visible="documentDialog.visible" :width="documentDialog.width"
             :height="documentDialog.height" @onClose="onClose"
             @onConfirm="onConfirm">
             <div slot="content">
                <el-form :model="documentInfo" ref="documentInfoForm"
              :rules="rules" label-width="80px">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="documentInfo.title" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="documentInfo.remark" type="textarea" :rows="4" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="上传文件">
                        <el-upload :on-success="handleFileSuccess"
                            :before-upload="beforeFileUpload" :data="uploadHeader"
                            action="http://localhost:8888/api/oss/file/upload?module=file_url"
                            :file-list="fileList">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <i class="el-icon-warning" id="iconw" v-if="icon == 'warning'"></i>
                            <i class="el-icon-success" id="icons" v-if="icon == 'success'"></i>
                            <i class="el-icon-error" id="icon" v-if="icon == 'error'"></i>
                        </el-upload>
                    </el-form-item>
             </el-form>
             </div>
             
            </system-dialog>
        </el-card>
    </el-main>
</template>

<script>
import documentApi from '@/api/document'
import userApi from '@/api/user'
import SystemDialog from '@/components/system/SystemDialog.vue'
import { getToken } from '@/utils/auth'

export default {
    name: 'material',
    components: {
        SystemDialog
    },
    data() {
        return {
            searchModel: {
                id: null,
                title: '',
                pageNo: 1,
                pageSize: 10,
            },
            documrntList: [],
            userList:[],
            tableProp:[
                { prop:'title',label:'标题', width:'200px'},
                { prop:'createUserId', label:'创建人', width:'120px',
                    formatter:value => {
                            const cuName = this.userList.find(user => user.id === value.createUserId)
                            return cuName !== undefined ? cuName.nickName : '-'
                        }},
                { prop:'remark', label:'备注'},
                { prop:'createTime', label:'创建时间', width:'100px'},
            ],
            documentDialog:{
                title:'',
                visible:false,
                height:300,
                width:400,
            },
            documentInfo:{
                id:null,
                title:'',
                createUserId:null,
                fileUrl:'',
                remark:'',
            },
            rules:{
                title: [{ required: true, trigger: "blur", message: "请输入标题" }],
                remark: [{ required: true, trigger: "blur", message: "请输入文件描述" }],
                
            },
            uploadHeader: { "token": getToken() },
            icon:'warning',
            fileList: [],
            pageNo: 1,
            pageSize: 10,
            total: 0,
        }
    },
    methods: {
        async search(pageNo, pageSize) {
            this.searchModel.pageNo = pageNo
            this.searchModel.pageSize = pageSize
            let res = await documentApi.getDocumentList(this.searchModel)
            if (res.success) {
                this.documrntList = res.data.records
                this.total = res.data.total
            }
        },
        async getUserList(){
            let res = await userApi.getUserAll()
            if(res.success){
                this.userList = res.data
            }
        },
        resetValue() {
            this.searchModel = {}
            this.search()
        },
        openAddWindow() {
            this.$resetForm('documentInfoForm',this.documentInfo)
            this.fileList = []
            this.icon = 'warning'
            this.documentDialog.title = '添加材料'
            this.documentDialog.visible = true
        },
        updateDocument(row){
            this.documentDialog.title = '修改材料信息'
            this.documentDialog.visible = true
            this.$objCopy(row,this.documentInfo)
        },
        async deleteDocument(row){
            let confirm = await this.$myconfirm("确定删除吗？")
            if(confirm){
                let res = await documentApi.deleteDocumentById({id:row.id})
                if(res.success){
                    this.search()
                    this.$message.success(res.message)
                }else{
                    this.$message.error(res.message)
                }
            }
        },
        // 页数发生变化
        handleSizeChange(size) {
            this.pageSize = size
            this.search(this.pageNo, size)
        },
        // 页码发生变化
        handleCurrentChange(page) {
            console.log(page)
            this.pageNo = page
            this.search(page, this.pageSize)
        },
        onConfirm(){
            this.documentInfo.createUserId = this.$store.getters.userId
            this.$refs.documentInfoForm.validate(async (valid) => {
                if(valid){
                    let res = null
                    if(this.documentDialog.title == '添加材料'){
                        res = await documentApi.addDocument(this.documentInfo)
                    }else if(this.documentDialog.title == '修改材料信息'){
                        res = await documentApi.updeteDocumentById(this.documentInfo)
                    }
                    if(res.success){
                        this.$message.success(res.message)
                        this.search()
                        this.documentDialog.visible = false
                    }
                }
            })   
        },
        onClose(){
            this.documentDialog.visible = false
        },
        // 上传照片成功回调
        handleFileSuccess(res, file) {
            this.documentInfo.fileUrl = res.data
            this.icon='success'
            this.fileList.push({name:file.name,url:res.data})
            console.log(res.data)
            console.log(this.fileList)
            console.log(file)
            this.$forceUpdate()
            this.$message.success(res.message)
        },
        // 上传校验
        beforeFileUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isLt2M) {
                this.$message.error('上传文件大小不能超过 2MB!')
            }
            return isLt2M
        },
    },
    created() {
        this.search()
        this.getUserList()
    },
}
</script>

<style lang="scss" scoped>
    a{
        color: blue;
    }
    #iconw{
        padding-left: 10px;
        color: rgb(116, 116, 116);
    }
    #icons{
        padding-left: 10px;
        color: rgb(83, 242, 75);
    }
</style>